<template>
  <div>
    <!-- 头部面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 添加分类按钮 -->
      <el-row>
        <el-button type="primary" @click="addCategory">添加分类</el-button>
      </el-row>
      <!-- 分类的数据表格 -->
      <el-row>
        <!-- columns 表格的行显示的内容 -->
        <tree-table
          :data="GoodList"
          :columns="columns"
          show-index
          index-text="#"
          :selection-type="false"
          :expand-type="false"
          border
          v-loading="loading"
        >
          <template slot="valid" scope="scope">
            <i class="el-icon-success" v-if="scope.row.cat_deleted === true" style="color:red"></i>
            <i class="el-icon-error" v-else></i>
          </template>
          <template slot="valid" scope="scope">
            <i class="el-icon-success" v-if="scope.row.cat_deleted === true" style="color:red"></i>
            <i class="el-icon-error" v-else></i>
          </template>
          <template slot="order" scope="scope">
            <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
            <el-tag v-else-if="scope.row.cat_level === 1" type="success">二级</el-tag>
            <el-tag v-else type="warning">三级</el-tag>
          </template>
          <template slot="ops" scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click="editCategory(scope.row)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="deleteCategory(scope.row)">删除</el-button>
          </template>
        </tree-table>
      </el-row>

      <!-- 分页显示 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.pagenum"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="this.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total"
      ></el-pagination>

      <!-- 添加修改的弹框 -->
      <el-dialog :title="title + '分类'" :visible.sync="addUpdateVisible" @close="resetAddUpdateForm">
        <el-form ref="addUpdateForm" :rules="rules" :model="addUpdateForm" label-width="80px">
          <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="addUpdateForm.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="父级分类" prop="cat_pid" v-if="title === '添加' ? true : false">
            <el-cascader
              :options="parentGoodsList"
              :props="cascaderProps"
              @change="parentCateChange"
              v-model="selectKeys"
              clearable
            ></el-cascader>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="resetAddUpdateForm">取 消</el-button>
          <el-button type="primary" @click="addUpdateSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  reqGoodList,
  reqParentdGoodList,
  reqAddCategory,
  reqEditCategory,
  reqDeleteCategory
} from "../../api/index";
export default {
  data () {
    return {
      loading: true,
      // 商品的列表数据
      GoodList: [],
      // 获取商品列表所有级别的分类
      type: 3,
      // 当前的页码值
      pagenum: 1,
      // 每页显示的条数
      pagesize: 5,
      // 总页数
      total: 1,
      // 表格的列显示的内容
      columns: [
        {
          label: "分类名称",
          prop: "cat_name"
        },
        {
          label: "是否有效",
          prop: "cat_deleted",
          type: "template",
          template: "valid"
        },
        {
          label: "排序",
          prop: "cat_level",
          type: "template",
          template: "order"
        },
        {
          label: "排序",
          type: "template",
          template: "ops"
        }
      ],

      // 添加或修改的显示
      addUpdateVisible: false,

      // 添加或修改的标题
      title: "",

      // 添加或删除的表单
      addUpdateForm: {
        // 将要添加的分类的名称
        cat_name: "",
        // 父级分类的id【如果不填默认是父级分类id】
        cat_pid: 0,
        // 分类的等级，默认要添加的是一级分类【如果不填默认是一级分类】
        cat_level: 0
      },

      // 表单的验证规则
      rules: {
        cat_name: [
          { required: true, message: "请输入分类名称", trigger: "blur" }
        ]
      },

      // 父级分类的数据【只需要显示商品的前两级】
      parentGoodsList: [],

      // 级联选择器的配置项
      cascaderProps: {
        // hover 的形式激活下级选项
        expandTrigger: "hover",
        // 存储的数据的值
        value: "cat_id",
        // 显示到界面的值
        label: "cat_name",
        // 嵌套的子项
        children: "children",
        // 可以选择一级，也可以选择二级的数据
        checkStrictly: true
      },

      // 级联选择器的父级id数组
      selectKeys: [],

      // 编辑分类的id
      cateId: ""
    };
  },
  created () {
    this.getGoodList();
  },
  methods: {
    // 商品列表
    async getGoodList () {
      this.loading = true;
      const { type, pagenum, pagesize } = this;
      const result = await reqGoodList(type, pagenum, pagesize);
      if (result.meta.status === 200) {
        this.GoodList = result.data.result;
        this.total = result.data.total;
        this.pagenum = result.data.pagenum + 1;
        console.log(result);
      } else {
        this.$message.error(result.meta.msg);
      }
      this.loading = false;
    },

    // 当前的页码条数
    handleSizeChange (newSize) {
      this.pagesize = newSize;
      this.getGoodList();
    },

    // 当前的页码数
    handleCurrentChange (newPage) {
      this.pagenum = newPage;
      this.getGoodList();
    },

    // 添加的弹框
    addCategory () {
      this.title = "添加";
      // 获取父级分类列表
      this.getParentGoodsList();
      // 展示对话框
      this.addUpdateVisible = true;
    },

    // 获取父级分类的数据列表
    async getParentGoodsList () {
      const result = await reqParentdGoodList(2);
      // console.log(result)
      if (result.meta.status === 200) {
        this.parentGoodsList = result.data;
        // console.log(this.parentGoodsList)
      } else {
        this.$message.error(result.meta.msg);
      }
    },

    // 级联选择器发生变化触发的函数
    parentCateChange (cateValue) {
      // console.log(cateValue)
      if (cateValue.length > 0) {
        this.addUpdateForm.cat_pid = cateValue[cateValue.length - 1];
        this.addUpdateForm.cat_level = cateValue.length;
      }
    },

    // 表单的统一验证
    addUpdateSubmit () {
      // this.addUpdateVisible = false
      this.$refs.addUpdateForm.validate(async valid => {
        if (!valid) return;
        /* console.log(this.addUpdateForm.cat_name)
          console.log(this.addUpdateForm) */
        console.log(this.cateId);
        //  添加分类
        if (!this.cateId) {
          const { cat_name, cat_pid, cat_level } = this.addUpdateForm;
          console.log(cat_name, cat_pid, cat_level);
          const result = await reqAddCategory(cat_pid, cat_name, cat_level);
          if (result.meta.status === 201) {
            this.$message.success("添加分类成功");
            this.getGoodList();
          } else {
            this.$message.error(result.meta.msg);
          }
        } else {
          //修改分类
          const result = await reqEditCategory(
            this.cateId,
            this.addUpdateForm.cat_name
          );
          if (result.meta.status === 200) {
            this.$message.success("修改分类成功");
            this.getGoodList();
          } else {
            this.$message.error(result.meta.msg);
          }
          this.cateId = "";
        }

        this.addUpdateVisible = false;
      });
    },

    // 关闭对话框要重置表单的元素
    resetAddUpdateForm () {
      this.addUpdateVisible = false;
      // 清空级联选择器的父级id，再次点击添加的时候就为空
      this.addUpdateForm.cat_name = "";
      this.addUpdateForm.cat_pid = 0;
      this.addUpdateForm.cat_level = 0;
      this.selectKeys = [];
    },

    // 处理编辑修改的函数
    editCategory (proInfo) {
      this.title = "修改";
      this.cateId = proInfo.cat_id;
      // console.log(proInfo,this.cateId)
      this.addUpdateForm.cat_name = proInfo.cat_name;
      // 展示对话框
      this.addUpdateVisible = true;
    },

    // 处理删除的函数
    deleteCategory (proInfo) {
      this.$confirm(`您确定要删除 【${proInfo.cat_name}】 分类吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(proInfo)
        const result = await reqDeleteCategory(proInfo.cat_id)
        if (result.meta.status === 200) {
          this.$message.success('删除成功')
          this.getGoodList()
        } else {
          this.$message.error(result.meta.msg)
        }
      }).catch((err) => {
        console.log(err)
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
};
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 15px;

  .el-row {
    margin-top: 15px;
  }

  .el-cascader {
    width: 100%;
  }
}

/*
vue-table-with-tree-grid 的使用
1. 在 main.js 中局部注册
2. 在 category.vue 中使用
3. 表格的数据源,    data——表格各行的数据
<zk-table :data="data"></zk-table>
4. 指定显示多少列   columns——表格各列的配置【（具体见下文：Columns Configs）】
label——指定名称   prop——指定这一列的值【直接写渲染的名称，会到data中找】
<zk-table :data="data" :columns="columns"></zk-table>
data(){
    columns: [
          {
            label: 'score',
            prop: 'score',
          },
          {
            label: 'likes',
            prop: 'likes',
            minWidth: '200px',
            type: 'template',
            template: 'likes',
          },
        ],
}
5. 去除复选框  :selection-type="false"
<zk-table :data="data" :columns="columns" :selection-type="false"></zk-table>
6. 移除展开行  :expand-type="false"
<zk-table :data="data" :columns="columns" :selection-type="false" :expand-type="false"></zk-table>
7. 添加索引列 show-index
<zk-table :data="data" :columns="columns" :selection-type="false" :expand-type="false" show-index></zk-table>
8. 自定义序号标题 index-text="#"
<zk-table :data="data" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#"></zk-table>
9. 表格列与列之间有纵向分割线 border
<zk-table :data="data" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border></zk-table>

10. 使用自定义插槽来实现自定义渲染  columns 中的定义使用template模板
表格中使用 <template slot="likes" scope="scope"></template>
columns: [
    {
    label: 'likes',
    prop: 'likes',
    type: 'template',
    template: 'likes',
    },
],

<zk-table :data="data" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border>
<template slot="likes" scope="scope">
    自定义渲染的内容
</template>
</zk-table>



Cascader 级联选择器的使用
1. :options="options"   指定级联选择器的数据源
<el-cascader :options="parentGoodsList">
2. expandTrigger: 'hover'  通过鼠标覆盖展开子菜单
3. :props  级联选择器的配置选项
——作用：展示不同的item项，选中后又有选中的值，可实现父子节点的嵌套，详细可以看 Cascader 中的 Props 配置项

<el-cascader
  :options="parentGoodsList"
  :props="cascaderProps"
  >

data(){
  return{
    cascaderProps: {
      // hover 的形式激活下级选项
      expandTrigger: 'hover',
      // 存储的数据的值
      value:'cat_id',
      // 显示到界面的值
      label:'cat_name',
      // 嵌套的子项
      children:'children',
      checkStrictly: true
    }
  }
}

4. 解决panel面板过高，在 全局的css样式表中添加
.el-cascader-panel{
  height: 200px;
}

5. 设置输入框可清空
<el-cascader
  :options="parentGoodsList"
  :props="cascaderProps"
  clearable
  >


6. v-model 将值双向绑定到 data中，必须绑定数组，
<el-cascader
  :options="parentGoodsList"
  :props="cascaderProps"
  clearable
  v-model="selectKeys"
  >
7. 需要将选中的值存起来，第一个值是一级分类id，第二个值为二级分类的id，解决方法：级联选择器变化触发的函数

级联选择器发生变化会触发的函数  @change="parentCateChange"
<el-cascader
  :options="parentGoodsList"
  :props="cascaderProps"
  clearable
  v-model="selectKeys"
  @change="parentCateChange"
  >

8. 修改级联选择器显示的宽度
.el-cascader{
    width: 100%;
  }

9. 级联选择器只允许选中最后一级分类，如果需要选中前面的，那么 cascaderProps 需要添加 checkStrictly: true

data(){
  return{
    cascaderProps: {
          // hover 的形式激活下级选项
          expandTrigger: 'hover',
          // 存储的数据的值
          value:'cat_id',
          // 显示到界面的值
          label:'cat_name',
          // 嵌套的子项
          children:'children',
          checkStrictly: true
        },
  }
}


10. 监听级联选择器的change事件，如果value > 0,证明有选中父级分类，如果value = 0，证明没有选中，默认为一级分类的id


11. 监听对话框的关闭事件，重置表单数据
bug:只清空了input，但没有清空级联选择器的数据
将数组，父级分类id，分类当前层级清空
*/
</style>
